key: "cover",
<!-- 通用的分类组件 -->
<template>
  <div class="p-5">
    <div class="card-box">
      <SearchView @query="querybtn" @reset="resetbtn" :catelist="comclasslist" />
    </div>

    <div class="card-box box mt-5">
      <a-button type="primary" @click="openbtn(null)">
        <template #icon>
          <PlusOutlined />
        </template>新增食物
      </a-button>

      <a-table :columns="columns" :data-source="newdata?.list" :pagination="false" :loading="loading">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'cover'">
            <a-image :width="100" :src="record.cover" />
          </template>

          <template v-if="column.key === 'action'">
            <a-button type="link" primary @click="editbtn(record)">编辑</a-button>
            <!-- <a-button type="link" primary @click="descbtn(record.id)">详情</a-button> -->
            <!-- <a-button type="link" danger @click="deleteBtn(record.id)">删除</a-button> -->
          </template>
        </template>
      </a-table>
      <PageView :total="newdata.total" v-model:current="newdata.current" v-model:pageSize="newdata.pagesize"
        @change="pagechange" />

    </div>
    <addView v-model:value="newdata.open" :type="newdata.type" :editdata="newdata.editinfo" :catelist="comclasslist"
      @submit="submitbtn" />
  </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, createVNode, watch } from "vue";

import { PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import * as api from "#/api/core/food.ts";

import addView from "./addView.vue";
import SearchView from "./searchView.vue";

import PageView from "#/components/PageView/index.vue";
import { useRequest, createUseRequestComponent } from "vue-hooks-plus";
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import { getcomlist } from "#/hooks/common.ts";
import { mapCatename } from '#/utils/index.js'





// 定义接口类型
interface NewData {
  type: "add" | "update"; // 限制 type 只能是 'add' 或 'edit'
  editinfo: any; // 根据实际情况替换 any 为具体类型，比如 YourEditInfoType
  open: boolean;
  current: number;
  pagesize: number;
  query: any;
  total: Number,

  list: any,
}

const newdata: NewData = reactive({
  open: false,
  type: "add",
  editinfo: null,
  current: 1,
  pagesize: 10,
  query: {},
  unitlist: [],
  total: 0,
  list: []
});

const columns = [
  {
    title: "封面",
    dataIndex: "cover",
    align: "center",
    key: "cover",
  },
  {
    title: "名称",
    dataIndex: "name",
    align: "center",
    key: "name",
    width: 200,
  },

  {
    title: "所属分类",
    dataIndex: "catename",
    align: "center",
    key: "catename",
    width: 200,

  },
  {
    title: "描述",
    dataIndex: "description",
    align: "center",
    key: "description",
  },
  {
    title: "创建时间",
    dataIndex: "creationTime",
    align: "center",
    key: "creationTime",
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    key: "action",
    width: 200,

  },
];


const openbtn = (e: any) => {
  newdata.type = "add";
  newdata.editinfo = e;
  newdata.open = true;
};

const editbtn = (e: any) => {
  newdata.type = "update";
  console.log('编辑', e);

  newdata.editinfo = {
    ...e,
    categoryId: [e.categoryId]
  }

  newdata.open = true;
};

const querybtn = (e: any) => {
  console.log("e", e);
  newdata.query = e;
  run();
};

const resetbtn = (e: any) => {
  newdata.query = e;
  console.log('重置表单', e, newdata.query
  );

  run();
};

const { data, loading, error, run } = useRequest(
  () =>
    api.$getlist({
      ...newdata.query,
      SkipCount: (newdata.current - 1) * newdata.pagesize,
      MaxResultCount: newdata.pagesize
    }),
  {
    manual: true, //手动触发

    onSuccess: async (result) => {

      newdata.list = await mapCatename(result.items, 4)
      console.log("获取食物列表", newdata.list);


      newdata.total = result.totalCount
      // return result.items
      // 此时 data.value 与 result 是一致的
    },
  }
);

run();

const submitbtn = () => {
  newdata.current = 1;
  run();
};

const pagechange = () => {
  console.log('new', newdata);

  run();
}



// 获取分类
const { comclasslist } = getcomlist(4);








const deleteBtn = async (id: any) => {
  Modal.confirm({
    title: "提示",
    icon: createVNode(ExclamationCircleOutlined),
    content: "确定要删除该数据?",
    async onOk() {
      try {
        await api.$deletehabit({}, id);
        message.success("删除成功");
        newdata.current = 1;
        run();
      } catch { }
    },
    onCancel() { },
  });
}



const descbtn = async (id: any) => {
  try {
    let temp = await api.$getdesc(id, {})
    console.log('食物详情', temp);

  } catch { }

}



</script>
<style scoped lang="less">
.box {
  min-height: 100px;
  // box-sizing: border-box;
  // padding: 20px;
}
</style>
